<template>
  <div class="product-main-wrap">
    <div class="product-main-wrap">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-row>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <span>商品名称：</span>
                  <el-input
                    v-model="input"
                    placeholder="请输入"
                    class="input-product"
                  />
                </div>

                <div class="grid-content bg-purple">
                  <span>商品质量：</span>
                  <el-select
                    v-model="value"
                    placeholder="全部"
                    class="selecte-radiu"
                  >
                    <el-option
                      v-for="item in state"
                      :key="item.value"
                      :label="item.label"
                    >
                      <span style="float: left">{{ item.label }}</span>
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <span>订单编号：</span>
                  <el-input
                    v-model="input"
                    placeholder="请输入"
                    class="input-product"
                  />
                </div>

                <div class="grid-content bg-purple">
                  <span>服务态度：</span>
                  <el-select
                    v-model="value"
                    placeholder="全部"
                    class="selecte-radiu"
                  >
                    <el-option
                      v-for="item in state"
                      :key="item.value"
                      :label="item.label"
                    >
                      <span style="float: left">{{ item.label }}</span>
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <span>评价时间：</span>
                  <el-input placeholder="请输入" class="input-product" />
                </div>

                <div class="grid-content bg-purple">
                  <span>物流服务：</span>
                  <el-select placeholder="全部" class="selecte-radiu">
                    <el-option
                      v-for="item in state"
                      :key="item.value"
                      :label="item.label"
                    >
                      <span style="float: left">{{ item.label }}</span>
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row class="buttons">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <div class="btns">
              <el-button type="primary" round class="btn-reset">重置</el-button>
              <el-button type="primary" round class="btn-screen"
                >筛选</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <br />
    <br />
    <br />

    <p class="item">
      全部评价
      <span
        >共<b>{{ count }}</b
        >条</span
      >
    </p>
    <div class="cen">
      <ul>
        <li class="title">
          <p><input type="checkbox" /></p>
          <p>评价内容</p>
          <p>评分</p>
          <p>商品信息</p>
          <p>订单编号</p>
          <p>买家信息</p>
          <p>操作</p>
        </li>
        <li class="content" v-for="item in list" :key="item.goodsId">
          <p><input type="checkbox" /></p>
          <p class="goodsContent">{{ item.goodsContent }}</p>
          <p class="star">
            <i
              >商品质量 <e>{{ item.goodsStar }}</e></i
            ><br />
            <i
              >服务态度 <e>{{ item.goodsStar }}</e></i
            ><br />
            <i
              >物流服务 <e>{{ item.goodsStar }}</e></i
            >
          </p>
          <p>{{ item.goodsName }}</p>
          <p>{{ item.goodsNum }}</p>
          <p>{{ item.buyName }}</p>
          <p>
            <!-- <a style="color: #126dff">评价回复</a> -->
            <el-button
              text
              @click="(dialogFormVisible = true), appraise"
              style="color: blue"
              >评价回复</el-button
            >

            <el-dialog v-model="dialogFormVisible" title="回复内容">
              <el-form :model="form">
                <el-form-item :label-width="formLabelWidth">
                  <textarea
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    v-model="content"
                  ></textarea>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="(dialogFormVisible = false), appraise"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    @click="(dialogFormVisible = false), appraise"
                    >确认</el-button
                  >
                </span>
              </template>
            </el-dialog>
          </p>
        </li>
      </ul>
    </div>

    <br />
    <el-pagination
      style="text-align: center; margin-left: 340px"
      background="true"
      layout="prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, reactive } from "vue";
import evaluate from "../../../../mock/evaluate";
export default defineComponent({
  setup() {
    const content = ref<string>("");
    const appraise = () => {
      console.log(content.value);

      content.value = "";
    };
    const dialogTableVisible = ref(false);
    const dialogFormVisible = ref(false);
    const formLabelWidth = "140px";
    const form = reactive({
      name: "",
      region: "",
      date1: "",
      date2: "",
      delivery: false,
      type: [],
      resource: "",
      desc: "",
    });
    const count = ref(0);
    const num = ref<number>(1);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = async (val: number) => {
      console.log(val);
      num.value = val;
      const res: any = await evaluate.getData({
        page: num.value,
        size: 10,
      });
      console.log(num.value);
      list.value = res.result;
    };
    interface NavList {
      [propname: string]: string;
    }
    let list = ref<NavList[]>([]);
    onMounted(async () => {
      const res: any = await evaluate.getData({
        page: num.value,
        size: 10,
      });
      console.log("data", res.result);
      list.value = res.result;
      count.value = res.count;
    });
    const value = ref("");
    const state = [
      {
        value: "全部",
        label: "全部",
      },
      {
        value: "运动鞋",
        label: "运动鞋",
      },
      {
        value: "休闲鞋",
        label: "休闲鞋",
      },
      {
        value: "板鞋",
        label: "板鞋",
      },
      {
        value: "篮球鞋",
        label: "篮球鞋",
      },
      {
        value: "拖鞋",
        label: "拖鞋",
      },
      {
        value: "皮鞋",
        label: "皮鞋",
      },
    ];
    // const value = ref("");
    const classify = [
      {
        value: "全部",
        label: "全部",
      },
      {
        value: "销售中",
        label: "销售中",
      },
      {
        value: "未上架",
        label: "未上架",
      },
      {
        value: "已下架",
        label: "已下架",
      },
    ];
    const input = ref("");
    return {
      content,

      appraise,
      dialogTableVisible,
      dialogFormVisible,
      formLabelWidth,
      form,
      value,
      state,
      classify,
      input,
      list,
      currentPage,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      count,
      num,
    };
  },
});
</script>

<style lang="less" scoped>
textarea {
  width: 500px;
  height: 100px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.item {
  font-size: 16px;
  font-weight: bolder;
  padding-left: 7px;
  margin-bottom: 20px;
  border-left: 3px solid blue;
  span {
    font-size: 12px;
    color: #a6a6a6;
    b {
      color: black;
    }
  }
}
.cen {
  .content {
    display: flex;
    justify-content: space-around;
    height: 66px;
    line-height: 66px;
    font-size: 12px;
    text-align: center;
    align-items: center;
    background: white;
    .goodsContent {
      white-space: nowrap;
      overflow: hidden;
      width: 100%;
      text-overflow: ellipsis;
      text-align: left;
    }
    p {
      flex: 1;
      a {
        margin-right: 3px;
      }
    }
    .star {
      text-align: left;
      line-height: 12px;
      i {
        display: inline-block;
        margin-left: 40px;
        margin-top: 5px;

        e {
          color: #ff5733;
        }
      }

      // span{
      //   // flex: 1;
      // }
    }
  }
  .title {
    display: flex;
    height: 66px;
    justify-content: space-around;
    line-height: 66px;
    font-size: 16px;
    color: white;
    background: #126dff;
    text-align: center;
    align-items: center;
    p {
      flex: 1;
    }
  }
}
.el-col {
  border-radius: 4px;
  background: #fff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.product-main-wrap {
  /deep/.el-input__wrapper {
    border-radius: 50px !important;
  }
  /deep/.el-col {
    padding: 10px;
    text-align: right;
    padding-right: 70px;
  }
  /deep/.el-input--suffix {
    display: inline-flex;
    width: 94%;
  }
  .bg-purple-dark {
    .grid-content {
      margin-bottom: 20px;
    }
  }
  .input-product {
    // /deep/ .el-input {
    width: 50%;
    // }
  }
  .buttons {
    height: 70px;
    .btns {
      width: 300px;
      margin: 0 auto;
      // margin-top: 10px;
      .btn-reset {
        background: #eaf0ff;
        color: #004dff;
        margin-right: 50px;
      }
      .btn-screen {
        background: #126dff;
        width: 150px;
      }
    }
  }
}
</style>
